<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>反馈列表</title>
    <link rel="stylesheet" href="/css/common.css"> <!-- 引入通用 CSS -->

    <style>
        input[type="text"] {
            padding: 8px;
            border: 1px solid #ccc;
            border-radius: 4px;
        }
        button {
            padding: 8px 16px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }
        button:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body class="p-4">
<div>
    <h1 class="text-2xl font-bold mb-2">反馈列表</h1>
    <!-- 添加两个输入框，分别用于按用户名和管理员搜索 -->
    <input type="text" id="userNameInput" placeholder="按用户名搜索" class="mb-4">
    <input type="text" id="adminNameInput" placeholder="按管理员搜索" class="mb-4">
    <button onclick="searchFeedbacksByCriteria()" class="ml-2">搜索</button>
    <table class="w-full border-collapse border border-gray-300">
        <thead>
        <tr>
            <th class="border border-gray-300 p-2">用户名</th>
            <th class="border border-gray-300 p-2">管理员</th>
            <th class="border border-gray-300 p-2">内容</th>
            <th class="border border-gray-300 p-2">操作</th>
        </tr>
        </thead>
        <tbody id="feedbackTableBody">
        <tr th:each="feedbacks : ${feedback}">
            <td th:text="${feedbacks.userName}" class="border border-gray-300 p-2"></td>
            <td th:text="${feedbacks.adminName}" class="border border-gray-300 p-2"></td>
            <td th:text="${feedbacks.message}" class="border border-gray-300 p-2"></td>
            <td class="border border-gray-300 p-2">
                <form th:action="@{/feedback/{id}(id=${feedbacks.id})}" method="post">
                    <input type="hidden" name="_method" value="DELETE">
                    <input type="submit" value="删除">
                </form>
            </td>
        </tr>
        </tbody>
    </table>
    <div class="pagination mt-4">
        <!-- 首页 -->
        <a th:if="${currentPage > 1}" th:href="@{/feedback-list(page=1, size=8)}" data-page="1">首页</a>
        <!-- 上一页 -->
        <a th:if="${currentPage > 1}" th:href="@{/feedback-list(page=${currentPage - 1}, size=8)}" th:data-page="${currentPage - 1}">上一页</a>
        <!-- 页码列表 -->
        <span th:each="i : ${#numbers.sequence(
            (currentPage - 2 > 0)? currentPage - 2 : 1,
            (currentPage + 2 < totalPages)? currentPage + 2 : totalPages)}"
              th:class="${i == currentPage}? 'active' : ''"
              th:text="${i}">
                <a th:href="@{/follow-list(page=${i}, size=8)}" th:data-page="${i}"></a>
            </span>
        <!-- 下一页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/feedback-list(page=${currentPage + 1}, size=8)}" th:data-page="${currentPage + 1}">下一页</a>
        <!-- 尾页 -->
        <a th:if="${currentPage < totalPages}" th:href="@{/feedback-list(page=${totalPages}, size=8)}" th:data-page="${totalPages}">尾页</a>
    </div>
    <div th:if="${message}" class="message" th:text="${message}"></div>
    <div th:if="${error}" class="error" th:text="${error}"></div>
</div>
<script>
    function searchFeedbacksByCriteria() {
        // 获取两个输入框的值，并转换为大写
        const userNameFilter = document.getElementById('userNameInput').value.toUpperCase();
        const adminNameFilter = document.getElementById('adminNameInput').value.toUpperCase();

        const table = document.getElementById('feedbackTableBody');
        const rows = table.getElementsByTagName('tr');

        for (let i = 0; i < rows.length; i++) {
            const cells = rows[i].getElementsByTagName('td');
            // 获取当前行的用户名和管理员单元格的文本内容
            const userName = cells[0].textContent || cells[0].innerText;
            const adminName = cells[1].textContent || cells[1].innerText;

            // 判断当前行是否满足搜索条件
            const userNameMatch = userNameFilter === '' || userName.toUpperCase().indexOf(userNameFilter) > -1;
            const adminNameMatch = adminNameFilter === '' || adminName.toUpperCase().indexOf(adminNameFilter) > -1;

            // 如果当前行满足所有搜索条件，则显示该行，否则隐藏该行
            if (userNameMatch && adminNameMatch) {
                rows[i].style.display = '';
            } else {
                rows[i].style.display = 'none';
            }
        }
    }
</script>
</body>
</html>